<template>
  <div class="app-container">
    <!-- ///////////////////////// -->
    <el-form
      :rules="rules"
      ref="form"
      :inline="true"
      :model="form"
      class="demo-form-inline"
      label-width="180px"
    >
    <el-divider content-position="left">学员基础信息</el-divider>
    <el-row :align="top">
      <el-col>
        
      </el-col>
    </el-row>
    
      <el-form-item label="学号:"  prop="studentId">
        <el-input v-model="form.studentId" clearable placeholder="学号自动生成" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="姓名:" prop="name">
        <el-input v-model="form.name" clearable placeholder="输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="曾用名:">
        <el-input v-model="form.oldName" clearable placeholder="输入曾用名"></el-input>
      </el-form-item>

      

      <el-form-item label="手机号:" prop="phone" >
        <el-input v-model="form.phone" clearable placeholder="输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="籍贯:" prop="nativePlace">
        <el-input v-model="form.nativePlace" clearable placeholder="输入籍贯"></el-input>
      </el-form-item>

      <el-form-item label="性别:" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择性别" clearable>
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="民族:" prop="nation">
        <el-input v-model="form.nation" clearable placeholder="输入民族"></el-input>
      </el-form-item>

      <el-form-item label="政治面貌:" prop="politicalAffiliation">
        <el-select v-model="form.politicalAffiliation" placeholder="输入政治面貌" clearable>
          <el-option v-for="item in politicalAffiliationList" :key="item.id" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
       
      </el-form-item>

      <el-form-item label="班级:" prop="classId">
        <el-select v-model="form.classId" placeholder="输入班级" clearable filterable @change="selectClass">
          <el-option v-for="item in classList" :label="item.className" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原毕业学校:">
        <el-input clearable
          v-model="form.originalGraduationSchool"
          placeholder="输入原毕业学校"
        ></el-input>
      </el-form-item>


      <el-form-item label="入学日期:" prop="entranceDate">
        <el-date-picker style="width: 93%;"
            v-model="form.entranceDate"
            clearable
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
      </el-form-item>

      <el-form-item label="户籍省县:">
        <el-input clearable
          v-model="form.provinceCounty"
          placeholder="输入户籍省县"
        ></el-input>
      </el-form-item>

      <el-form-item label="户籍镇/街:">
        <el-input clearable
          v-model="form.townStreet"
          placeholder="输入户籍镇/街"
        ></el-input>
      </el-form-item>
      <el-form-item label="证件类型:" prop="certificateType">
        <el-select v-model="form.certificateType" placeholder="输入证件类型" clearable>
          <el-option v-for="item in certificateTypeList" :key="item.id" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号:" prop="certificateId">
        <el-input clearable
          v-model="form.certificateId"
          placeholder="输入证件号"
        ></el-input>
      </el-form-item>

      

      <el-form-item label="一卡通卡号:">
        <el-input clearable
          v-model="form.tunionNumber"
          placeholder="输入一卡通卡号"
        ></el-input>
      </el-form-item>

      <el-form-item label="实际居住地址:">
        <el-input clearable
          v-model="form.residentialAddress"
          placeholder="输入实际居住地址"
        ></el-input>
      </el-form-item>
      <!-- 
      <el-form-item label="一卡通卡号:">
        <el-input
          v-model="form.tNnionNumber"
          placeholder="输入一卡通卡号"
        ></el-input>
      </el-form-item> -->

      <el-form-item label="家庭邮编:">
        <el-input clearable
          v-model="form.familyPost"
          placeholder="输入家庭邮编"
        ></el-input>
      </el-form-item>

      <el-form-item label="家庭电话:">
        <el-input clearable
          v-model="form.familyPhone"
          placeholder="输入家庭电话"
        ></el-input>
      </el-form-item>

      <el-form-item label="特长爱好:">
        <el-input clearable
          v-model="form.specialtyHobby"
          placeholder="输入特长爱好"
        ></el-input>
      </el-form-item>

      <el-form-item label="获奖情况:">
		    <el-input clearable 
          v-model="form.awardInfo"
          placeholder="输入获奖情况"
        ></el-input>
      </el-form-item>
      <el-form-item label="学生照片:" prop="studentPicture">
                        <el-upload border
                            class="avatar-uploader"
                            :action="activeUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="form.studentPicture" :src="imgPath + form.studentPicture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
      </el-form-item>
      <el-divider content-position="left">监护人信息</el-divider>
      <el-form-item label="监护人姓名:" prop="guardianName">
        <el-input clearable
          v-model="form.guardianName"
          placeholder="输入监护人姓名"
        ></el-input>
      </el-form-item>

      <el-form-item label="监护人与学生关系:" prop="relationOfGuardian">
        <el-input clearable
          v-model="form.relationOfGuardian"
          placeholder="输入监护人与学生关系"
        ></el-input>
      </el-form-item>

      <el-form-item label="监护人联系电话:" prop="guardianPhoneNumber">
        <el-input clearable
          v-model="form.guardianPhoneNumber"
          placeholder="输入监护人联系电话"
        ></el-input>
      </el-form-item>
      <el-divider content-position="left">缴费信息</el-divider>
      <el-form-item label="缴费类别:" >
        <el-checkbox :label="'学费('+tuitionFee+')'" checked="true" border disabled size="mini"></el-checkbox>
        <el-checkbox-group v-model="scRelationList"  size="mini">
          <el-checkbox v-for="item in chargeList" :key="item.id" :label="item.id+''" border>{{ item.chargeName+'('+item.chargeAmount+')' }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-form>

    <div style="text-align: center;">
        <el-button type="primary" @click="onSubmit">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import { addStudentInfo, findAllSchoolClass,findStudentDetailById,updateInfo,findTuitionFee } from "@/api/studentInfo/infoMaintenance/index";
import {pageList} from "@/api/pay/charge";
import { throws } from "assert";


export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        // studentId: [
        //   { required: true, message: "请输入学号", trigger: "change" },
        // ],
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        //gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        // nativePlace: [
        //   { required: true, message: "请选择籍贯", trigger: "change" },
        // ],
        // nation: [{ required: true, message: "请选择民族", trigger: "change" }],
        // politicalAffiliation: [
        //   { required: true, message: "请选择政治面貌", trigger: "change" },
        // ],
        classId: [
          { required: true, message: "请选择班级", trigger: "change" },
        ],
        // numberInClass: [
        //   { required: true, message: "请选择班内编号", trigger: "change" },
        // ],
        // entranceDate: [
        //   { required: true, message: "请选择入学日期", trigger: "change" },
        // ],
        // certificateId: [
        //   { required: true, message: "请选择证件号", trigger: "change" },
        // ],
        // certificateType: [
        //   { required: true, message: "请选择证件类型", trigger: "change" },
        // ],
        // guardianName: [
        //   { required: true, message: "请选择监护人姓名", trigger: "change" },
        // ],
        // relationOfGuardian: [
        //   {
        //     required: true,
        //     message: "请选择监护人与学生关系",
        //     trigger: "change",
        //   },
        // ],
        guardianPhoneNumber: [
          {
            required: true,
            message: "请选择监护人联系电话",
            trigger: "change",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        phone:[{ required: true, message: "请输入手机号", trigger: "change" },
        {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }]
      },
      /////////
      form: {
        studentId: "", //学号 true
        name: "", //姓名 true
        oldName: "", //曾用名
        studentPicture: "",// 照片
        nativePlace: "", //籍贯 true
        gender: "", //性别 true
        nation: "", //民族 true
        politicalAffiliation: "", //政治面貌 true
        className: "", //班级 true
        numberInClass: "", //班内编号 true
        studentType: "", //学生类别
        originalGraduationSchool: "", //原毕业学校
        isAlien: "", //港澳台侨外
        entranceDate: "", //入学日期 true
        provinceCounty: "", //户籍省县
        townStreet: "", //户籍镇/街
        certificateId: "", //证件号 true
        certificateType: "", //证件类型 true
        tunionNumber: "", //一卡通卡号
        residentialAddress: "", //实际居住地址
        familyPost: "", //家庭邮编
        familyPhone: "", //家庭电话
        specialtyHobby: "", //特长爱好
        awardInfo: "", //获奖情况
        guardianName: "", //监护人姓名 true
        relationOfGuardian: "", //监护人与学生关系 true
        guardianPhoneNumber: "", //监护人联系电话 true
        createBy: "", //创建人
        createTiem: "", //创建时间
        modifyBy: "", //修改人
        modifyTime: "", //修改时间
      },
      //图片路径
      imgPath: process.env.VUE_APP_BASE_API + '/student/picture/',
      //上传的路径
      activeUrl: '',
      classList:[],
      studentId:null,
      politicalAffiliationList:[],
      certificateTypeList:[],
      nationList:[],
      tuitionFee:0,
      scRelationList:[],
      chargeList:[]
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getChargeList(){
      pageList({pageSize:100,pageNum:1}).then(resp=>{
        this.chargeList = resp.data.list
      })
    },
    //查询班级专业学费
    getTuitionFee(val){
      if(val){
        findTuitionFee(val).then(resp=>{
          this.tuitionFee = resp.data
        })
      }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        this.form.scRelationList = this.scRelationList
        if (valid) {
          if(this.studentId){
            this.updateInfo()
          }else{
            this.addInfo()
          }
        }
      })
    },
    addInfo(){//新增数据
      const _this = this
      // 调用方法提交数据
      addStudentInfo(this.form).then((res) => {
            this.$confirm('新增成功是否留在当前页面?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "返回",
                    type: "warning"
                  }).then(() => {
                    this.form={}
                  }).catch(function() {
                    _this.$router.go(-1)
                  });
          });
    },
    updateInfo(){//更新数据
      const _this = this
      updateInfo(this.form).then(resp=>{
        this.$confirm('修改成功是否留在当前页面?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "返回",
                    type: "warning"
                  }).then(() => {
                    
                  }).catch(function() {
                    _this.$router.go(-1)
                  });
      })
    },
    //非空验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getClassList(){
      findAllSchoolClass().then(resp=>{
        this.classList = resp.data
      })
    },
    selectClass(val){
      this.getTuitionFee(val)
      this.form.classId= val
      for(let i=0;i<this.classList.length;i++){
        if(this.classList[i].id==val){
          this.form.className = this.classList[i].className
        }
      }
    },
    cancel(){
      this.$router.go(-1)
    },
    //上传logo成功回调
    handleAvatarSuccess(res, file) {
        // this.form.tenantLogo = "http://127.0.0.1:8088" + '/school/file/' + res.result; 
        this.form.studentPicture = res.result; 
    },
    //上传logo前校验
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
            this.$message.error('上传学生照片大小不能超过10MB!');
        }
        return isLt2M;
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //查询班级下拉数据
    this.getClassList()
    //查询收费内容
    this.getChargeList()
    this.studentId = this.$route.query.id
    if(this.studentId){
      findStudentDetailById(this.studentId).then(resp=>{
        this.form = resp.data
        if(resp.data)
        this.form.classId = Number(resp.data.classId)
        this.getTuitionFee(this.form.classId)
        this.scRelationList=this.form.scRelationList
      })
    }
    this.getDicts("political_affiliation").then(response => {
        this.politicalAffiliationList = response.data;
    });
    this.getDicts("certificate_type").then(response => {
        this.certificateTypeList = response.data;
    });
    this.getDicts("nation").then(response => {
        this.nationList = response.data;
    });
    this.activeUrl = process.env.VUE_APP_BASE_API +'/student/info/uploadImage';
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar1 {
    width: 120px;
    height: 120px;
    display: block;
  }
  
</style>
